<template>
  <a-row :gutter="24">
    <a-col :md="3" :sm="24">
      <a-card :bordered="false" :loading="treeLoading" style="overflow: auto">
        <div v-if="this.proTree != ''" style="max-height: 750px">
          <!--          树形结构 -->
          <a-tree
            style="scroll: true"
            :treeData="proTree"
            v-if="proTree.length"
            @select="handleClick"
            :defaultExpandAll="false"
            :defaultExpandedKeys="defaultExpandedKeys"
            :replaceFields="replaceFields"
          />
        </div>
      </a-card>
    </a-col>
    <a-col :md="21" :sm="24">
      <a-card :bordered="false" :bodyStyle="tstyle">
        <div class="table-page-search-wrapper" v-if="hasPerm('pro:page')">
          <!--          搜索表单-->
          <a-form layout="inline">
            <a-row :gutter="48">
              <a-col :md="8" :sm="24">
                <a-form-item label="产品编码">
                  <a-input v-model.trim="queryParam.code" allow-clear placeholder="请输入产品编码" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="产品名称">
                  <a-input v-model.trim="queryParam.name" allow-clear placeholder="请输入产品名称" />
                </a-form-item>
              </a-col>
              <template v-if="advanced">
                <a-col :md="8" :sm="24">
                  <a-form-item label="备注">
                    <a-input v-model.trim="queryParam.remarks" allow-clear placeholder="请输入备注" />
                  </a-form-item>
                </a-col>
                <!--                自定义配置字段-->
                <json-query ref="jsonQuery" :fieldProp="fieldProp" />
              </template>
              <!--              通过展开或收起来控制自定义字段的传参与否-->
              <a-col :md="8" :sm="24">
                <span class="table-page-search-submitButtons">
                  <a-button
                    type="primary"
                    @click="
                      () => {
                        if (advanced) {
                          $refs.jsonQuery.getSearchForm().submit((values) => {
                            this.queryParam.josn = values
                            $refs.table.refresh(true)
                          })
                        } else {
                          $refs.table.refresh(true)
                        }
                      }
                    "
                  >查询</a-button
                  >
                  <a-button
                    style="margin-left: 8px"
                    @click="
                      () => {
                        this.queryParam = {}
                        if (advanced) {
                          $refs.jsonQuery.getSearchForm().reset()
                        }
                        $refs.table.refresh(true)
                      }
                    "
                  >重置</a-button
                  >
                  <a @click="toggleAdvanced" style="margin-left: 8px">
                    {{ advanced ? '收起' : '展开' }}
                    <a-icon :type="advanced ? 'up' : 'down'" />
                  </a>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </a-card>
      <a-card :bordered="false">
        <s-table
          ref="table"
          :columns="columns"
          :data="loadData"
          :alert="options.alert"
          :rowKey="(record) => record.id"
          :rowSelection="options.rowSelection"
          :components="this.comp"
          :scroll="{x:1200}"
          :bordered="true"
        >
          <span slot="logo" slot-scope="logo">
            <a-tag v-if="logo == null || logo === ''">暂无图片</a-tag>
            <img v-else style="width: 80px; height: 80px" alt="" :src="getUrl(logo)">
          </span>
          <!--          作用域插槽用于实现数据的显示-->
          <span slot="unitScopedSlots" slot-scope="text">
            <a-tag v-if="text == null"></a-tag>
            <a-tag v-else color="green">{{ 'unit' | dictType(text) }}</a-tag>
          </span>
          <span slot="proTypeIdScopedSlots" slot-scope="text">
            <!-- {{ '${column.dictTypeCode}' | dictType(text) }} -->
            {{ 'common_status' | dictType(text) }}
          </span>
        </s-table>
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
import { STable, XDown } from '@/components'
import { proDelete, proExport, proPage } from '@/api/modular/main/pro/proManage'
import { getProTree } from '@/api/modular/main/protype/proTypeManage'
import dragMixin from '@/mixins/drag/index'
import '@/mixins/drag/drag.css'
// import proModelTableDrawer from '../promodel/tableDrawer'
import JsonQuery from '@/components/MyComp/JsonQuery'
import { fieldConfigList } from '@/api/modular/main/fieldconfig/fieldConfigManage'

export default {
name: 'ProTable',
components: {
    STable,
    XDown,
    // proModelTableDrawer,
    JsonQuery
},
// 表格拖拽
mixins: [dragMixin],
data() {
    return {
    unit: [],
    fieldProp: {},
    // 点击的树节点
    selProTypeId: undefined,
    proTypeIdData: [],
    treeLoading: true,
    proTypeTree: [],
    // 默认展开的
    defaultExpandedKeys: [],
    // 替换字段
    replaceFields: {
        key: 'id'
    },
    // 高级搜索 展开/关闭
    advanced: false,
    // 查询参数
    queryParam: {},
    // 表头
    columns: [
        {
        title: '产品编码',
        align: 'center',
        dataIndex: 'code',
        width: 140,
        ellipsis: true
        },
        {
        title: '产品名称',
        align: 'center',
        dataIndex: 'name',
        width: 140,
        ellipsis: true
        },
        {
        title: '产品类型',
        align: 'center',
        dataIndex: 'proTypeName',
        width: 140,
        ellipsis: true
        },
        {
        title: '工艺路线',
        align: 'center',
        dataIndex: 'workRouteName',
        width: 140,
        ellipsis: true
        },
        {
        title: '图片',
        align: 'center',
        dataIndex: 'image',
        width: 140,
        scopedSlots: { customRender: 'logo' }
        },
        {
        title: '库存单位',
        align: 'center',
        dataIndex: 'unit',
        scopedSlots: { customRender: 'unitScopedSlots' },
        width: 140,
        ellipsis: true
        },
        {
        title: '备注',
        align: 'center',
        dataIndex: 'remarks',
        width: 140,
        ellipsis: true
        }
    ],
    tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' },
    // 加载数据方法 必须为 Promise 对象
    loadData: (parameter) => {
        return proPage(Object.assign(parameter, this.queryParam)).then((res) => {
        res.data.rows.forEach((item) => {
            Object.assign(item, JSON.parse(item.josn))
        })
        return res.data
        })
    },
    selectedRowKeys: [],
    selectedRows: [],
    proTree: [],
    options: {
        alert: {
        show: true,
        clear: () => {
            this.selectedRowKeys = []
        }
        },
        rowSelection: {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange,
        type: 'radio'
        }
    },
    previewById: '/api/sysFileInfo/preview?id='
    }
},
created() {
    this.unit = this.$options.filters['dictData']('unit')
    // 获取树
    this.getProTree()
    // 自定义字段的显示，有权限则显示，无则不显示
    if (this.hasPerm('fieldConfig:list')) {
    fieldConfigList({ tableName: 'dw_pro' }).then((res) => {
        res.data.forEach((item) => {
        // 查询自定义字段
        this.fieldProp[item.fieldIndex] = {
            type: item.fieldType,
            title: item.fieldTitle,
            'x-decorator': 'FormItem',
            // 'x-component': 'a-input',
            'x-decorator-props': {
            labelCol: 6,
            // labelWrap: true,
            wrapperCol: 18
            },
            'x-component-props': {
            placeholder: '请输入',
            style: {
                width: '100%'
            }
            }
        }
        // 表格自定义字段
        this.columns.splice(3, 0, {
            title: item.fieldTitle,
            align: 'center',
            dataIndex: item.fieldIndex,
            width: 100,
            ellipsis: true
        })
        })
    })
    }
},
methods: {
    /**
     * 获取到类型树，展开顶级下树节点，考虑到后期数据量变大，不建议全部展开
     */
    getProTree() {
    getProTree(Object.assign(this.queryParam)).then((res) => {
        this.treeLoading = false
        if (!res.success) {
        return
        }
        this.proTree = res.data
        for (const item of res.data) {
          // eslint-disable-next-line eqeqeq
          if (item.parentId == 0) {
              this.defaultExpandedKeys.push(item.id)
          }
        }
    })
    },
    /**
     * 点击左侧机构树查询列表
     */
    handleClick(e) {
    this.selProTypeId = e.toString()
    this.queryParam = {
        ProTypeId: e.toString()
    }
    this.$refs.table.refresh(true)
    },
    /**
     * 单个删除
     */
    singleDelete(record) {
    const param = [{ id: record.id }]
    this.proDelete(param)
    },
    /**
     * 批量删除
     */
    batchDelete() {
    const paramIds = this.selectedRowKeys.map((d) => {
        return { id: d }
    })
    this.proDelete(paramIds)
    },
    proDelete(record) {
    proDelete(record).then((res) => {
        if (res.success) {
        this.$message.success('删除成功')
        this.$refs.table.clearRefreshSelected()
        } else {
        this.$message.error(res.message) // + res.message
        }
    })
    },
    toggleAdvanced() {
    this.advanced = !this.advanced
    },
    /**
     * 批量导出
     */
    batchExport() {
    const paramIds = this.selectedRowKeys.map((d) => {
        return { id: d }
    })
    proExport(paramIds).then((res) => {
        this.$refs.batchExport.downloadfile(res)
    })
    },
    handleOk() {
    this.$refs.table.refresh()
    },
    onSelectChange(selectedRowKeys, selectedRows) {
    this.selectedRowKeys = selectedRowKeys
    this.selectedRows = selectedRows
    },
    // 获取选中的数据供父组件调用
    getSelectedRows() {
    return this.selectedRows
    },
    getUrl(logo) {
    const imageIds = logo
    let urlId = ''
    imageIds.split(';').forEach((id) => {
        if (urlId === '') {
        urlId = id
        }
    })
    return this.previewById + urlId
    }

}
}
</script>
<style lang = "less">
.table-operator {
margin-bottom: 18px;
}

button {
margin-right: 8px;
}

/*滚动条样式*/
::-webkit-scrollbar {
width: 5px;
height: 5px;
}

/*定义滑块*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #a9a9a9;
}

/*滑动轨道*/
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background: #f5f5f5;
}
</style>
